<div class="chat-box centered flex-column"
     [style]="getWidth()"
     (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
  <div class="d-flex flex-row align-items-center w-100">
    <img class="mx-2" nz-image [ngSrc]="getIcon(chatModel?.role,type)" [nzFallback]="'assets/programmer.png'" width="20" height="20" alt="图标"/>
    <div class="mx-2">{{ getHeadName(chatModel) }}</div>
    @if(active){
      <div nz-tooltip [nzTooltipTitle]="'dialog.inContext' | translate" class="active rounded-4 mx-2"></div>
    }
    <button nz-tooltip (click)="reRequest()" [nzTooltipTitle]="'dialog.regenerate' | translate" class="rounded-4 mx-0"
            [class.d-flex]="isMiniView()"
            [class.flex-row]="isMiniView()"
            [class.align-items-center]="isMiniView()"
            nz-button>
      <span nz-icon nzType="redo" nzTheme="outline"></span>
      @if(isMiniView()){
        <span>{{'dialog.retry' | translate}}</span>
      }
    </button>
    @if(isHover){
      <div class="d-flex flex-row">
        <button nz-tooltip (click)="triggerEdit()" [nzTooltipTitle]="'dialog.edit' | translate" class="rounded-4 mx-2" nz-button>
          <span nz-icon nzType="edit" nzTheme="outline"></span>
        </button>
        <button nz-tooltip (click)="triggerStartAsContext()" [nzTooltipTitle]="'dialog.startContextFromHere' | translate" class="rounded-4" nz-button>
          <span nz-icon nzType="sort-ascending" nzTheme="outline"></span>
        </button>
        <button nz-tooltip (click)="triggerDelete()" [nzTooltipTitle]="'dialog.deleteContent' | translate" class="rounded-4 mx-2" nz-button>
          <span nz-icon nzType="delete" nzTheme="outline"></span>
        </button>
        <button nz-tooltip (click)="copyAllContent()" [nzTooltipTitle]="'dialog.copyContent' | translate" class="rounded-4" nz-button>
          <span nz-icon nzType="copy" nzTheme="outline"></span>
        </button>
      </div>
    }@else{
      <div class="d-flex flex-row">
        <button class="rounded-4 mx-2" nz-button>
          <span nz-icon nzType="fullscreen" nzTheme="outline"></span>
        </button>
      </div>
    }
  </div>
  <div class="flex-grow-1 centered px-5 my-2 w-100">
    <div [style]="getFontSize()">
      @switch (getDisplayType(type)){
        @case (DisplayType.staticRequestOrResult){
          @defer (on immediate){
            <app-static-request [chatModel]="chatModel"></app-static-request>
          }@placeholder (minimum 50ms){
            <nz-skeleton></nz-skeleton>
          }
        }
        @case (DisplayType.staticImageResult){
          @defer (on immediate){
            <app-static-image [chatModel]="chatModel"></app-static-image>
          }@placeholder (minimum 50ms){
            <nz-skeleton></nz-skeleton>
          }
        }
        @case (DisplayType.staticSpeechResult){
          @defer (on immediate){
            <app-static-tts [chatModel]="chatModel"></app-static-tts>
          }@placeholder (minimum 50ms){
            <nz-skeleton></nz-skeleton>
          }

        }
        @case (DisplayType.dynamicChatResult){
          @defer (on immediate){
            <app-chat [chatModel]="chatModel" [content]="chatModel?.content?.length"></app-chat>
          }@placeholder (minimum 50ms){
            <nz-skeleton></nz-skeleton>
          }
        }
        @case (DisplayType.dynamicImageResult){
          @defer (on immediate){
            <app-image [chatModel]="chatModel" [content]="chatModel?.content?.length"></app-image>
          }@placeholder (minimum 50ms){
            <nz-skeleton></nz-skeleton>
          }

        }
        @case (DisplayType.dynamicSpeechResult){
          @defer (on immediate){
            <app-tts [chatModel]="chatModel" [content]="chatModel?.content?.length"></app-tts>
          }@placeholder (minimum 50ms){
            <nz-skeleton></nz-skeleton>
          }
        }
        @case (DisplayType.dynamicTranscriptionResult){
          @defer (on immediate){
            <app-stt [chatModel]="chatModel" [content]="chatModel?.content?.length"></app-stt>
          }@placeholder (minimum 50ms){
            <nz-skeleton></nz-skeleton>
          }
        }
        @default {
          <app-static-request [chatModel]="chatModel"></app-static-request>
        }
      }
    </div>

  </div>
</div>
